//import 导入 意为 '导入 模块儿 从 react 模块儿导入'
import React,{ Component } from 'react';
import {
    AppRegistry, // 注册APP入口
    StyleSheet, //样式表组件
    Image, //添加Image组件
    TextInput,
    TouchableHighlight, //触摸高亮效果
    TouchableOpacity, //触摸透明效果
    TabBarIOS,//引入TabBarIOS组件
    Text, //文字组件,它里面只能放文字 类似于 span 标签
    View, //结构组件,它类似于 div 标签
    ScrollView
} from 'react-native';

/*TabBarIOS 组件
该组件提供一个Tab切换功能，可以切换不同的页面，他有一个附属组件TabBarIOS.Item
组件属性：
barTintColor: Tab 栏的背景颜色
tintColor: 当我们选中了某一个Tab时，该Tab的图标颜色
translucent: Tab 栏是否透明

TabBarIOS.Item 属性

badge : 红色的提示数字，可以用于消息提醒
icon : Tab的图标，如果不指定，默认显示系统图标
onPress： 点击事件，当某个Tab被选中时，需要改变组件的selected={true}设置。
selected：是否选中某个Tab，如果其值为true，则选中并且显示子组件。
selectedIcon：选中状态的图标，如果为空，则将图标变为蓝色。
systemIcon: 系统图标，其值是枚举类型，可选值有‘bookmarks’，‘contacts’，‘downloads’，‘favorites’，‘featured’，‘history’，‘more’，‘most-recent’，‘most-viewed’，‘recents’，‘search’和‘top-rated’。

title：标题。他会出现在图标底部，当我们书用了系统图标时，将会忽略该标题。*/

//创建一个 MyApp 组件
class MyApp extends Component{
   render(){
       return(
           <ScrollView>
               <View style={styles.wp}>
                   <View>
                   <TextInput style={styles.input}
                    placeholder='🔍搜索:/目的地/酒店/航班'
                    placeholderTextColor = 'black'
                    returnKeyType = 'go'


                   />
                   </View>
                   <View>
                   <Image
                   style={styles.img}


                   source={require('./img/icon5.png')}
                   onLoad = {this.load}
                   onLoadEnd = {this.end}
               />

           <Text style={styles.btn}>我   的</Text>
                 </View>
               </View>
              <View style={styles.content}>
                 <Image style={styles.bigI}
                   source={require('./img/37.jpg')}
                />
              </View>
               <View style={[styles.fwp,styles.r]}>
                   <View style={styles.nwp}>
                      <Text style={[styles.txt,styles.Blt]}>酒  店</Text>
                      <Text style={[styles.txt,styles.Bb]}>海外酒店</Text>
                      <Text style={[styles.txt,styles.Bb]}>团购</Text>

                   </View>
                   <View style={styles.nwp}>
                           <Text style={styles.txt}>
                               <Image
                                       style={styles.hotel}


                                       source={require('./img/icon2.png')}
                                       onLoad = {this.load}
                                       onLoadEnd = {this.end}
                                   /></Text>
                       <Text style={[styles.txt,styles.Bb]}>特价酒店</Text>
                       <Text style={[styles.txt,styles.Bb]}>民宿.客栈</Text>

                   </View>

               </View>





               <View style={[styles.fwp,styles.b]}>
                   <View style={styles.nwp}>
                   <Text style={[styles.txt,styles.Blt]}>机  票</Text>
                       <Text style={[styles.txt,styles.Bb]}>火车票.抢片</Text>
                       <Text style={[styles.txt,styles.Bb]}>汽车票.船票</Text>

                       </View>
                       <View style={styles.nwp}>
                   <Text style={styles.txt}>
                   <Image
                       style={styles.hotel}


                       source={require('./img/icon7.png')}
                       onLoad = {this.load}
                       onLoadEnd = {this.end}
                   /></Text>
                       <Text style={[styles.txt,styles.Bb]}>特价机票</Text>
                       <Text style={[styles.txt,styles.Bb]}>专车.租车</Text>

                       </View>

                   </View>




                       <View style={[styles.fwp,styles.g]}>
                          <View style={styles.nwp}>
                             <Text style={[styles.txt,styles.Blt]}>旅  游</Text>
                               <Text style={[styles.txt,styles.Bb]}>目的地攻略</Text>
                               <Text style={[styles.txt,styles.Bb]}>邮轮</Text>

                               </View>
                               <View style={styles.nwp}>
                           <Text style={styles.txt}>
                           <Image
                               style={styles.hotel}


                               source={require('./img/icon4.png')}
                               onLoad = {this.load}
                               onLoadEnd = {this.end}
                           /></Text>
                               <Text style={[styles.txt,styles.Bb]}>周边游</Text>
                               <Text style={[styles.txt,styles.Bb]}>定制旅游</Text>

                       </View>

                       </View>
                       <View style={[styles.fwp,styles.o]}>
                               <View style={styles.nwp}>
                               <Text style={[styles.txt,styles.Blt]}>景点.玩乐</Text>
                                   <Text style={[styles.txt,styles.Bb]}>美食林</Text>
                                   <Text style={[styles.txt,styles.Bb]}>全球购.换汇</Text>

                                   </View>
                                   <View style={styles.nwp}>
                                   <Text style={[styles.txt,styles.Bb]}>礼品卡</Text>
                                   <Text style={[styles.txt,styles.Bb]}>FIWI.电话卡</Text>
                                   <Text style={[styles.txt,styles.Bb]}>保险.签证</Text>

                                   </View>

                       </View>



                            <View style={[styles.wrap,styles.mt]}>
                               <View style={[styles.box,styles.br]}>
                                     <Text style={styles.tac}>
                                           <Image
                                           style={styles.bImg}


                                           source={require('./img/icon15.png')}

                                       />
                                      </Text>
                                     <Text style={styles.tac}>自由行</Text>
                               </View>
                                       <View style={[styles.box,styles.br]}>
                                   <Text style={styles.tac}>
                                       <Image
                                       style={styles.bImg}


                                       source={require('./img/icon16.png')}

                                   />
                                   </Text>
                                       <Text style={styles.tac}>微领队</Text>
                                       </View>
                                      <View style={[styles.box,styles.br]}>
                                   <Text style={styles.tac}>
                                       <Image
                                       style={styles.bImg}


                                       source={require('./img/icon17.png')}

                                   />
                                   </Text >
                                       <Text style={styles.tac}>一日游</Text>
                                       </View>
                                       <View style={styles.box}>
                                   <Text style={styles.tac}>
                                       <Image
                                       style={styles.bImg}


                                       source={require('./img/icon18.png')}

                                   />
                                   </Text>
                                       <Text style={styles.tac}>高端游</Text>
                                       </View>
                            </View>


                                   <View style={styles.wrap}>
                                   <View style={[styles.box,styles.br,styles.bbt]}>
                                   <Text style={styles.tac}>
                                   <Image
                                       style={styles.bImg}


                                       source={require('./img/icon19.png')}

                                   />
                                   </Text>
                                       <Text style={styles.tac}>酒店+景点</Text>
                                       </View>
                                       <View style={[styles.box,styles.br,styles.bbt]}>
                                   <Text style={styles.tac}>
                                   <Image
                                       style={styles.bImg}


                                       source={require('./img/icon20.png')}

                                   />
                                   </Text>
                                       <Text style={styles.tac}>亲子.游学</Text>
                                       </View>
                                       <View style={[styles.box,styles.br,styles.bbt]}>
                                   <Text style={styles.tac}>
                                   <Image
                                       style={styles.bImg}


                                       source={require('./img/icon21.png')}

                                   />
                                   </Text >
                                       <Text style={styles.tac}>外币兑换</Text>
                                       </View>
                                       <View style={[styles.box,styles.bbt]}>
                                   <Text style={styles.tac}>
                                   <Image
                                       style={styles.bImg}


                                       source={require('./img/icon22.png')}

                                   />
                                   </Text>
                                       <Text style={styles.tac}>加盟合作</Text>
                                       </View>
                                       </View>

                                       <View style={styles.wrap}>
                                   <View style={[styles.box,styles.br]}>
                                   <Text style={styles.tac}>
                                   <Image
                                       style={styles.bImg}


                                       source={require('./img/icon11.png')}

                                   />
                                   </Text>
                                       <Text style={styles.tac}>机场停车</Text>
                                       </View>
                                       <View style={[styles.box,styles.br]}>
                                   <Text style={styles.tac}>
                                   <Image
                                       style={styles.bImg}


                                       source={require('./img/icon12.png')}

                                   />
                                   </Text>
                                       <Text style={styles.tac}>行李极运</Text>
                                       </View>
                                       <View style={[styles.box,styles.br]}>
                                   <Text style={styles.tac}>
                                   <Image
                                       style={styles.bImg}


                                       source={require('./img/icon13.png')}

                                   />
                                   </Text >
                                       <Text style={styles.tac}>一日游</Text>
                                       </View>
                                       <View style={styles.box}>
                                   <Text style={styles.tac}>
                                   <Image
                                       style={styles.bImg}


                                       source={require('./img/icon14.png')}

                                   />
                                   </Text>
                                       <Text style={styles.tac}>更多服务</Text>
                                       </View>
                                       </View>



                          <View style={styles.tContent}>
                               <View style={styles.thContent}>
                                    <Image style={styles.thImg}
                                    source={require('./img/sale.png')}
                                       />
                                    <Text style={styles.thTxt}>领红包再下单></Text>
                               </View>

                               <View style={styles.thContentT}>
                                   <View style={[styles.thContentTS,styles.brw]}>
                                       <Text>
                                          <Image
                                              style={styles.thCImg}
                                              source={require('./img/32.jpg')}
                                           />
                                       </Text>
                                       <Text style={styles.thCTxt}>泰国曼谷泰国曼谷泰国曼谷泰国曼谷泰国曼谷泰国曼谷泰国曼谷泰国曼谷泰国曼谷泰</Text>
                                   </View>
                                   <View style={styles.thContentTS}>
                                        <View style={styles.throw}>
                                           <View >
                                            <Text>千块特价</Text>
                                            <Text>走过路过不要错过</Text>
                                           </View>
                                            <Image style={styles.thcowImg}
                                                   source={require('./img/31.png')}
                                               />
                                        </View>
                                        <View style={styles.throwO}>
                                               <View style={styles.thcolumn}>
                                                   <Text style={styles.thcoltxt}>海外精选</Text>
                                                   <Text style={styles.thcoltxt}>百元出境游</Text>
                                                   <Image style={[styles.tcowImg,styles.thcoltxt]}
                                                       source={require('./img/29.png')}
                                                    />
                                               </View>
                                               <View style={styles.thcolumn}>
                                                   <Text style={styles.thcoltxt}>周边玩乐</Text>
                                                       <Text style={styles.thcoltxt}>十元度周末</Text>
                                                       <Image style={[styles.tcowImg,styles.thcoltxt]}
                                                       source={require('./img/30.png')}
                                                   />
                                          </View>
                                        </View>
                                   </View>
                               </View>
                          </View>

                               <View style={styles.foContent}>
                                       <View style={styles.thContent}>
                                       <Image style={styles.foImg}
                                           source={require('./img/buy.png')}
                                       />
                                       <Text style={styles.thTxt}>获取更多福利></Text>
                                       <View>
                                          <View></View>
                                          <View></View>
                                       </View>
                               </View>
                       </View>
       </ScrollView>
       )
   }
}





//设置样式
const styles = StyleSheet.create({
    wp:{
        marginTop:30,
        height:25,
        marginLeft:10,
        flexDirection:'row',

    },
    input:{
        borderWidth:1,
        borderColor:'rgb(135,135,135)',
        height:23,
        lineHeight:23,
        paddingLeft:5,
        flex:1,
        fontSize:10,
        borderRadius:5,
        width:360,
        marginRight:10
    },
    img:{
        width:20,
        height:20,
        marginLeft:5

    },
    btn:{
       fontSize:10,
       color:'blue'
    },
    content:{
        width:405,
        height:75,
        borderTopWidth:1,
        borderColor:'rgb(193,193,193)',
        marginLeft:5,
        marginTop:7,
    },
    bigI:{
        width:405,
        height:75,
        

    },
    fwp:{


        height:80,
        marginLeft:8,
        marginRight:8,
        marginTop:5,

    },
    nwp:{
        flex:1,
        height:40,
        flexDirection:'row',

    },
    txt:{
        height:40,
        lineHeight:40,
        fontSize:15,
        textAlign:'center',
        flex:1,
        color:'rgb(255,255,255)',
    },
    hotel:{
        height:40,
        width:40,
        marginBottom:8
    },
    Bb:{
        borderWidth:1,
        borderColor:'rgb(255,255,255)',
    },
    Blt:{
        borderTopWidth:1,
        borderLeftWidth:1,
        borderColor:'rgb(193,193,193)',

    },
    r:{
        backgroundColor:'rgb(241,80,101)',
    },
    b:{
        backgroundColor:'rgb(60,131,255)',
    },
    g:{
        backgroundColor:'rgb(76,189,0)',
    },
    o:{
        backgroundColor:'rgb(241,132,0)',
    },

    wrap:{
        flexDirection:'row',
        marginLeft:8,
        marginRight:8,

        height:60
    },
    mt:{
        marginTop:5,
    },
    box:{
        flex:1,
        flexDirection:'column',

    },
    bImg:{
        width:25,
        height:28,
        marginTop:5,
    },
    tac:{
        textAlign:'center',
        marginTop:5,

    },
    bbt:{
        borderBottomWidth:1,
        borderBottomColor:'rgb(239,239,239)',
        borderTopWidth:1,
        borderTopColor:'rgb(239,239,239)',
    },
    br:{
        borderRightWidth:1,
        borderRightColor:'rgb(239,239,239)',
    },
    brw:{
        borderRightWidth:2,
        borderRightColor:'white',
    },
    tContent:{
        borderTopWidth:1,
        borderTopColor:'rgb(211,211,211)',
        borderBottomWidth:1,
        borderBottomColor:'rgb(211,211,211)',
        height:220,
        backgroundColor:'rgb(247,247,247)',
        marginTop:6,
        marginLeft:5,
        marginRight:5,
    },
    thContent:{
        height:40,
        backgroundColor:'white',
        flexDirection:'row',
        justifyContent:'space-between',
    },
    thImg:{
        width:60,
        height:15,
        marginTop:12.5,
        marginLeft:8,
    },
    thTxt:{
        marginTop:10,
        marginRight:8,
        backgroundColor:'rgb(240,54,85)',
        width:120,
        textAlign:'center',
        fontSize:16,
        height:22,
        color:'white',
        borderRadius:10,
        lineHeight:22,
    },
    thContentT:{
        flexDirection:'row',

    },
    thContentTS:{
        flex:1,

        height:180,
        flexDirection:'column',
    },
    thCImg:{
        width:201,
        height:100,
        marginTop:4,
    },
    thCTxt:{
        fontSize:14,

    },
    throw:{
        flexDirection:'row',
        justifyContent:'space-between',
        height:72,
        borderBottomWidth:2,
        borderBottomColor:'white'
    },
    thcowImg:{
        width:50,
        height:50,
        marginTop:20
    },
    throwO:{
        flexDirection:'row',
        justifyContent:'space-between',
    },
    thcolumn:{

        width:99.5,
        height:108,
        flexDirection:'column',
    },
    thcoltxt:{
        marginLeft:20,
        marginTop:10,


    },
    tcowImg:{
        width:40,
        height:30,

    },
    foContent:{
        borderTopWidth:1,
        borderTopColor:'rgb(211,211,211)',
        borderBottomWidth:1,
        borderBottomColor:'rgb(211,211,211)',
        height:500,
        backgroundColor:'rgb(247,247,247)',
        marginTop:6,
        marginLeft:5,
        marginRight:5,
    },
    foImg:{
        width:80,
        height:15,
        marginTop:12.5,
        marginLeft:8,
    }



});


//注册app,其中 'myapp'是指工程名,'MyApp'是创建的组件名
AppRegistry.registerComponent('myapp', () => MyApp);